<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>购物车</title>
    <link rel="stylesheet" href="css/shopping.css"/>
    <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="js/qxsp.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <!-- 复选框 -->
    <script type="text/javascript">

        $(function () {
            //获取登录用户的信息
            var user = JSON.parse(sessionStorage.getItem("user"));

            //查询出商品详细信息
            var params=getParams();
            if(params.articleId){
                $.get("/article/"+params.articleId,function (data) {
                    $(".body").renderValues(data,{
                        getHref:function (item,value) {
                            var href = $(item).data("href");
                            $(item).attr("href",href+value);
                        }
                    });

                    $(".footing").renderValues(data,{
                        getHref:function (item,value) {
                            var href = $(item).data("href");
                            $(item).attr("href",href+value);
                        }
                    });

                    //li4
                    var t = $(".num");
                    //li3
                    var one = $(".one").html();
                    //数量增加操作
                    $(".plus").click(function () {
                        t.val(parseInt(t.val()) + 1);
                        if (parseInt(t.val()) != 1) {
                            $('#reduce').attr('disabled', false);
                        }
                        setTotal();
                        //数量减少操作
                        $(".reduce").click(function () {
                            if (parseInt(t.val()) > 1) {
                                t.val(parseInt(t.val()) - 1);
                                setTotal();
//                    $('#reduce').attr('disabled', true);
                            }


//                if (parseInt(t.val()) == 0) {
//                    return false;
////                    $('#reduce').attr('disabled', true);
//                }

                        });
                        function setTotal() {
                            $("#result").html((parseInt(t.val()) *one));//toFixed()是保留小数点的函数
                            /*
                             $("#result").html((parseInt(t.val()) *one).toFixed(2));//toFixed()是保留小数点的函数
                             */
                        }

                        setTotal();
                    })

                    //点击全选
                    $("#checkbox").click(function () {
                        var checkbox = document.getElementById('checkbox');
                        checkbox.value == 1 ? checkbox.value = 2 : checkbox.value = 1;
                        var checkboxs = document.getElementsByName('box');
                        for (var i = 0; i < checkboxs.length; i++) {

                            if (checkbox.value == 1) {
                                checkboxs[i].checked = false;
                            } else {
                                checkboxs[i].checked = true;
                            }
                        }



                    });

                    //结算
                    $(".li7").click(function () {
                        $.post("/shop/shopCat",{articleId:params.articleId,number:$(".num").val(),totalCost:$("#result").html()},function (data) {
                            console.log(data);
                            if(data.success){
                                window.location.href="Pay.html?articleId="+params.articleId;
                            }
                        });
                    })
                });
            }







        });

        </script>
</head>
<body>
<div class="body">
    <div class="tour">
        <a href="javascript:history.go(-1);" class="tour1"><img src="img/back.png" alt="" style="height: 26px;width: 20px"></a>
        <p>购物车</p>
        <a href="javascript:;" class="tour2"><i class="btn"></i></a>
    </div>
        <div class="spxz">
    <ul>
        <li class="li1"><input type="checkbox" render-value="id" name="box"/></li>
        <li class="li2"><a href="spxq.html"><img render-src="picUrl" alt="" style="width: 60px;height: 60px"/></a></li>
        <li class="li3"><span render-html="articleName"></span><br><span style="color: red" >￥</span>
        <i id="one" class="one" disabled="disabled" render-html="price"></i></li>
        <li class="li4"><div><a class="reduce" >-</a><input type="text" value="1" class="num"/><a class="plus">+</a></div></li>
    </ul>
    </div>
</div>
<div style="clear: both"></div>
<div class="footing">
    <ul>
        <li class="li5"><input type="checkbox" id="checkbox" value="1"/>全选</li>
        <li class="li6">合计：<span class="red">￥<i id="result" render-html="price"></i></span></li>
        <li class="li7"><a><button type="button">结算</button></a></li>
<!--
        <li class="li7"><a data-href="Pay.html?articleId=" render-key="id" render-fun="getHref"><button type="button">结算</button></a></li>
-->
    </ul>
</div>
    <div class="alert">
       <table border="1" cellSpacing=0  style="width: 100%;text-align: center;border-spacing:0;BORDER-COLLAPSE: collapse">
           <tr>
               <td colspan="2">
                   <div style="padding: 0.5rem 0 0.5rem 0;font-size: 1.6rem">提示</div>
                   <div style="padding: 0.5rem 0 0.5rem 0;font-size: 1.6rem">确定删除当前商品?</div>
               </td>
           </tr>
           <tr>
               <td><button type="button" class="delete" style="border: none;outline: none;background-color: white;font-size: 1.6rem;padding: 0.5rem 0 0.5rem 0;width:100%">确定</button></td>
               <td><button type="button" class="none" style="border: none;outline: none;background-color: white;font-size: 1.6rem;padding: 0.5rem 0 0.5rem 0;width:100%">取消</button></td>
           </tr>
       </table>
    </div>
<div class="theme-popover-mask"></div>
</body>
</html>